<script setup>
	import $http from '@/utils/http'
	import { ref, onMounted, getCurrentInstance } from 'vue'
	import { onPullDownRefresh  } from '@dcloudio/uni-app'
	import { getClientHeight } from '@/utils/pkg'
	import { useUserStoreHook } from '@/stores/modules/user'
	import { useAppStoreHook } from '@/stores/modules/app'
	import { useMessage } from 'wot-design-uni'
	
	const message = useMessage()
	const instance = getCurrentInstance()
	const useUserStore = useUserStoreHook()
	const useAppStore = useAppStoreHook()
	
	// 跳转登录页面
	const getLogin = () => {
		uni.navigateTo({
			url: `/pages/login/login`
		});
	}
	
	// 请求退出登录和清理用户信息
	const requestClearUserData = async () => {
		const res = await $http.request({
			url: `/login-out`,
			method: 'POST',
			header: {
				token: true
			},
			data: { id: useUserStore.userinfo.id },
		})
		if(res.code !== 200) {
			toast.show({
				position: 'bottom',
				msg: res.msg
			})
			return
		}
		useUserStore.SET_REMOVE()
		useAppStore.SET_ACCOUNT(useUserStore.userinfo.account)
	}
	
	// 退出登录
	const loginOut = () => {
		message.confirm({
		    title: '登录',
				msg: '确定退出登录！',
		  })
		  .then(() => {
				requestClearUserData()
		  })
	}
	
	onMounted(() => {
		useAppStore.SET_APPNAME('短频')
		useAppStore.SET_ACCOUNT(useUserStore.userinfo.account)
	})
</script>

<template>
	<view class="page-setup">
		<view class="setup-list">
			<wd-cell v-for="(itme, index) in useAppStore.appInfo" :key="index" :title="itme.title" :value="itme.value" />
		</view>
		<view class="login-btn">
			<wd-button v-if="!useUserStore.isLogin" size="large" @click="getLogin">登录/注册</wd-button>
			<wd-button v-else type="error" size="large" @click="loginOut">退出</wd-button>
		</view>
	</view>
	<wd-message-box />
</template>

<style scoped lang="scss">
@import "@/common/common.scss";

.page-setup {
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	
	.setup-list {
		width: 100%;
		margin-bottom: 20rpx;
		
		:deep(.wd-cell) {
			color: #dddddd;
			background-color: transparent;
			border-bottom: 2rpx solid #5A5C61;
		}
		:deep(.wd-cell__value) {
			color: #A2A3A7;
		}
	}
	
	.login-btn {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		.wd-button {
			width: 60%;
			height: 90rpx;
		}
	}
}
</style>
